<template>
  <div class="numberInput">
    <input
      class="weui-input"
      v-model="viewValue"
      :maxlength="maxlength"
      :disabled="disabled"
      v-on:focus="focusInput(viewValue)"
      v-on:blur="change2ViewValue(viewValue)"
      v-on:input="updateModelData()"
      :placeholder="placeholder"
    />
    <!--单位-->
    <div class="dw_box">
      <span v-if="coinValue">{{ coinValue }}</span>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    value: {}, // Modelvalue
    comdify: {default: false}, //是否展示千分位
    decimalPlace: {default: 0}, //小数位数，如果指定则进行格式化
    coinValue: {default: ""}, //金额前缀 ￥
    abPermission: {}, //权限标签
    disabled: {
      default: false,
    },
    maxlength: {
      default: 12,
    },
    placeholder: {
      type: String,
      default: "请输入"
    }
  },
  data: function () {
    return {
      viewValue: "",
      beInputting: false,
      cls: "",
    };
  },
  created: function () {
  },
  mounted: function () {
    this.viewValue = this.formatNumber(this.value);
  },
  methods: {
    focusInput(val) {
      if (Number(val) <= 0) {
        this.viewValue = "";
      }
    },
    updateModelData: function (data) {
      this.beInputting = true;
      var modelValue = this.abTools.toNumber(this.viewValue, true);
      this.$emit("input", modelValue);
    },
    change2ViewValue: function (val) {
      var that = this;
      this.beInputting = false;
      window.setTimeout(function () {
        that.viewValue = that.formatNumber(val);
      }, 30);
    },
    formatNumber: function (tempValue) {
      if (!tempValue) return "";
      if (this.comdify) {
        tempValue = this.abTools.comdify(tempValue);
      }
      if (this.decimalPlace > 0) {
        tempValue = String(tempValue);
        if (tempValue.indexOf(".") != -1) {
          var ary = tempValue.split(".");
          var temp = ary[ary.length - 1];
          if (temp.length > 0 && temp.length < this.decimalPlace) {
            var zeroLen = "";
            for (var i = 0; i < this.decimalPlace - temp.length; i++) {
              zeroLen = zeroLen + "0";
            }
            tempValue = tempValue + zeroLen;
          } else if (temp.length > 0 && temp.length > this.decimalPlace) {
            temp = temp.substring(0, this.decimalPlace);
            ary[ary.length - 1] = temp;
            tempValue = ary.join(".");
          }
        } else {
          var zeroLen = "";
          for (var i = 0; i < this.decimalPlace; i++) {
            zeroLen = zeroLen + "0";
          }
          tempValue = tempValue + "." + zeroLen;
        }
      }

      // console.log("hhhhhhhhhhh", tempValue)
      // if (this.coinValue && tempValue) {
      //   if (![this.coinValue].includes(tempValue)) {
      //     tempValue = tempValue + " " + this.coinValue;
      //   } else {
      //     tempValue = tempValue;
      //   }
      // }

      return tempValue;
    },
    valueChange: function () {
      // if(!this.$vnode.context.$validity){
      // 	this.$vnode.context.$validity = {};
      // 	}
      //
      // if(this.abPermission == "b"){
      // 	if(!this.value){
      // 		this.$vnode.context.$validity[this.$attrs.desc] = "必填";
      // 		this.cls = "ivu-form-item-error";
      // 	}else{
      // 		delete this.$vnode.context.$validity[this.$attrs.desc];
      // 		this.cls = "";
      // 	}
      // }else if(this.$vnode.context.$validity[this.$attrs.desc]){
      // 	delete this.$vnode.context.$validity[this.$attrs.desc];
      //   	this.cls = "";
      // }
      if (this.beInputting) return;
      this.viewValue = this.formatNumber(this.value);
    },
  },
  watch: {
    //数据更新时 更新格式化
    value: function (newVal, oldVal) {
      this.valueChange();
    },
  },
};
</script>
<style scoped>
.numberInput {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dw_box {
  width: auto;
  height: 25px;
  line-height: 25px;
  font-size: 16px;
  color: #C8C8CD;
}
</style>
